<template>
    <view class="cview">
        <view class="coolc-cell" @click="bindClick">
            <view class="coolc-list" v-if="data.title">
				<view class="coolc-title">{{data.title}}</view>
				<view class="bottom_btn">
					<view class="coolc-info">
						<text :class="['info-text',data.read == 1 ? 'red' : '']">{{data.read == 1 ? '未读' : '已读'}}</text>
						<text class="info-text">{{data.datetime}}</text>
					</view>
					<view class="close-view" @click.stop="close">
						<view class="coolc icon-shanchu"></view>
						<view class="text">删除</view>
					</view>
				</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			default: function(e) {
				return {}
			}
		}
	},
	computed: {
		isImgRight() {
			return this.data.article_type === 2
		},
		isImgLeft() {
			return this.data.article_type === 1
		}
	},
	methods: {
		close(e) {
			this.$emit('close');
		},
		bindClick() {
			this.$emit('click');
		}
	}
}
</script>

<style lang='scss'>
.cview {
	display:flex; flex-direction:column; box-sizing:border-box; padding:$page-p-l-t-r-30;
    .coolc-cell {
		width:100%; background:$bgcolor_white; padding:0 30upx; text-align:center;
		
		.coolc-list {
			padding:30upx 0; text-align:left; 
			.coolc-title { width:100%; height:50upx; margin-bottom:5upx; font-size:$font-base; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
			
			.bottom_btn { 
				width:100%; height:40upx;
				.coolc-info {
					width:50%; height:40upx; line-height:40upx; display:block; float:left;
					.info-text { color:$font-color-gray; font-size:$font-base; display:block; float:left; margin-right:20upx;  }
					.red { color:$bgcolor_white; font-size:20upx; background:$font-color-red; padding:0 18upx; border-radius:20upx; }
				}
				.close-view {
					display:block; float:right;
					
					.coolc { height:40upx; line-height:40upx; font-size:$font-base; display:block; float:left; color:$font-color-gray; }
					.text { height:40upx; line-height:40upx; font-size:$font-base; padding-left:5px; display:block; float:left; color:$font-color-gray; }
				}
			}
		}
	}
}
</style>